<template>
  <view class="login">
    <view class="img">
      <img src="@/static/avatar.jpg" alt="">
    </view>
    <view class="btn">
      <u-button type="error" shape="circle" @click="getuserprofile">登录</u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      getuserprofile() {
        // 调用微信登录接口，获取 code
        // uni.switchTab({
        //   url:'/pages/my/my'
        // })
        uni.login({
          provider: 'weixin',
          success: (loginRes) => {
            const code = loginRes.code;
            // 将 code发送到后端服务进行解密
            // 调用微信授权接口，获取用户信息
            uni.getUserInfo({
              provider: 'weixin',
              success: (res) => {
                const encryptedData = res.encryptedData;
                const iv = res.iv;
                // 将 encryptedData 和 iv 发送到后端服务进行解密
                // 获取用户的手机号
                console.log(res);
              },
              fail: (err) => {
                console.log('getUserInfo failed:', err);
              }
            });
          },
          fail: (err) => {
            console.log('login failed:', err);
          }
        });
        uni.showActionSheet({
          itemList: ['微信登录', '手机号登录'],
          success: res => {
            const index = res.tapIndex;
            if (index === 0) {
              // 点击了微信登录
              this.wechatLogin();
            } else if (index === 1) {
              // 点击了手机号登录
              this.phoneLogin();
            }
          }
        });
      },
      wechatLogin() {
        // 执行微信登录逻辑
        console.log('执行微信登录');
        uni.switchTab({
          url:'/pages/my/my'
        })
      },

      phoneLogin() {
        // 执行手机号登录逻辑
        console.log('执行手机号登录');
      }

    }
  }
</script>

<style lang="scss" scoped>
  page {
    padding: 0 20rpx;
  }

  .login {
    margin: 380rpx auto;
    width: 98%;

    .btn {
      margin-left: 10rpx;
    }

    .img {
      margin-left: 42%;
      margin-bottom: 20rpx;

      // transform: translateX(-50%);
      img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }
    }

  }
</style>